<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>首页 - 管道巡检App</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body { 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            -webkit-user-select: none;
            user-select: none;
        }
        .ios-statusbar {
            height: 44px;
            background: linear-gradient(135deg, #000 0%, #333 100%);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            color: white;
            font-size: 14px;
            font-weight: 600;
        }
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-top: 1px solid #e5e7eb;
            padding: 8px 0 20px 0;
        }
        .card-shadow {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
    </style>
</head>
<body class="bg-gray-50 pb-20">
    <!-- iOS状态栏 -->
    <div class="ios-statusbar">
        <span>9:41</span>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal"></i>
            <i class="fas fa-wifi"></i>
            <div class="w-6 h-3 border border-white rounded-sm">
                <div class="w-4 h-1.5 bg-white rounded-sm m-0.5"></div>
            </div>
        </div>
    </div>

    <!-- 顶部导航 -->
    <div class="bg-gradient-to-r from-blue-600 to-purple-600 px-4 py-4">
        <div class="flex justify-between items-center text-white">
            <div class="flex items-center space-x-3">
                <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&h=40&fit=crop&crop=face" 
                     alt="头像" class="w-10 h-10 rounded-full border-2 border-white/30">
                <div>
                    <p class="font-medium">李巡检员</p>
                    <p class="text-xs text-blue-100">安全巡检员</p>
                </div>
            </div>
            <div class="flex items-center space-x-3">
                <button class="relative">
                    <i class="fas fa-bell text-xl"></i>
                    <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span>
                </button>
                <button>
                    <i class="fas fa-cog text-xl"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 天气和位置信息 -->
    <div class="bg-gradient-to-r from-blue-600 to-purple-600 px-4 pb-6">
        <div class="bg-white/20 backdrop-blur-sm rounded-2xl p-4 text-white">
            <div class="flex justify-between items-center">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-map-marker-alt text-yellow-300"></i>
                    <div>
                        <p class="text-sm">当前位置</p>
                        <p class="font-medium">石化园区A区</p>
                    </div>
                </div>
                <div class="text-right">
                    <div class="flex items-center space-x-2">
                        <i class="fas fa-sun text-yellow-300"></i>
                        <span class="text-lg font-medium">23°C</span>
                    </div>
                    <p class="text-xs text-blue-100">晴朗 • 适宜巡检</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 快捷功能 -->
    <div class="px-4 -mt-8 relative z-10">
        <div class="bg-white rounded-2xl p-6 card-shadow">
            <h2 class="text-lg font-semibold text-gray-800 mb-4">快捷功能</h2>
            <div class="grid grid-cols-4 gap-4">
                <button class="flex flex-col items-center space-y-2 p-3 rounded-xl hover:bg-blue-50 transition">
                    <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-clipboard-check text-blue-600 text-xl"></i>
                    </div>
                    <span class="text-xs text-gray-700 font-medium">开始巡检</span>
                </button>

                <button class="flex flex-col items-center space-y-2 p-3 rounded-xl hover:bg-red-50 transition">
                    <div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i>
                    </div>
                    <span class="text-xs text-gray-700 font-medium">上报缺陷</span>
                </button>

                <button class="flex flex-col items-center space-y-2 p-3 rounded-xl hover:bg-green-50 transition">
                    <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-tools text-green-600 text-xl"></i>
                    </div>
                    <span class="text-xs text-gray-700 font-medium">消缺任务</span>
                </button>

                <button class="flex flex-col items-center space-y-2 p-3 rounded-xl hover:bg-purple-50 transition">
                    <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-chart-line text-purple-600 text-xl"></i>
                    </div>
                    <span class="text-xs text-gray-700 font-medium">统计报告</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 今日概览 -->
    <div class="px-4 mt-6">
        <div class="bg-white rounded-2xl p-6 card-shadow">
            <h2 class="text-lg font-semibold text-gray-800 mb-4">今日概览</h2>
            <div class="grid grid-cols-3 gap-4">
                <div class="text-center">
                    <div class="text-2xl font-bold text-blue-600">5</div>
                    <div class="text-xs text-gray-500">待巡检</div>
                </div>
                <div class="text-center">
                    <div class="text-2xl font-bold text-green-600">12</div>
                    <div class="text-xs text-gray-500">已完成</div>
                </div>
                <div class="text-center">
                    <div class="text-2xl font-bold text-red-600">2</div>
                    <div class="text-xs text-gray-500">发现缺陷</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 最近任务 -->
    <div class="px-4 mt-6">
        <div class="bg-white rounded-2xl p-6 card-shadow">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-lg font-semibold text-gray-800">最近任务</h2>
                <button class="text-blue-600 text-sm">查看全部</button>
            </div>
            <div class="space-y-4">
                <div class="flex items-center space-x-4 p-3 bg-blue-50 rounded-xl">
                    <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
                        <i class="fas fa-clipboard-check text-white"></i>
                    </div>
                    <div class="flex-1">
                        <p class="font-medium text-gray-800">A-001段巡检任务</p>
                        <p class="text-sm text-gray-500">里程桩001-015 • 今天 09:00</p>
                    </div>
                    <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">进行中</span>
                </div>

                <div class="flex items-center space-x-4 p-3 bg-gray-50 rounded-xl">
                    <div class="w-10 h-10 bg-gray-400 rounded-full flex items-center justify-center">
                        <i class="fas fa-check text-white"></i>
                    </div>
                    <div class="flex-1">
                        <p class="font-medium text-gray-800">B-002段巡检任务</p>
                        <p class="text-sm text-gray-500">里程桩001-008 • 昨天 14:30</p>
                    </div>
                    <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">已完成</span>
                </div>

                <div class="flex items-center space-x-4 p-3 bg-red-50 rounded-xl">
                    <div class="w-10 h-10 bg-red-500 rounded-full flex items-center justify-center">
                        <i class="fas fa-exclamation-triangle text-white"></i>
                    </div>
                    <div class="flex-1">
                        <p class="font-medium text-gray-800">C-003段缺陷处理</p>
                        <p class="text-sm text-gray-500">管体外腐蚀 • 昨天 16:45</p>
                    </div>
                    <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">待处理</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 安全提醒 -->
    <div class="px-4 mt-6 mb-6">
        <div class="bg-gradient-to-r from-orange-100 to-red-100 rounded-2xl p-4 border border-orange-200">
            <div class="flex items-center space-x-3">
                <i class="fas fa-shield-alt text-orange-600 text-xl"></i>
                <div>
                    <p class="font-medium text-orange-800">安全提醒</p>
                    <p class="text-sm text-orange-700">今日大风天气，请注意巡检安全</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部标签栏 -->
    <div class="tab-bar">
        <div class="grid grid-cols-4 gap-1">
            <button class="flex flex-col items-center py-2 text-blue-600">
                <i class="fas fa-home text-lg mb-1"></i>
                <span class="text-xs">首页</span>
            </button>
            <button class="flex flex-col items-center py-2 text-gray-400">
                <i class="fas fa-clipboard-list text-lg mb-1"></i>
                <span class="text-xs">任务</span>
            </button>
            <button class="flex flex-col items-center py-2 text-gray-400">
                <i class="fas fa-camera text-lg mb-1"></i>
                <span class="text-xs">上报</span>
            </button>
            <button class="flex flex-col items-center py-2 text-gray-400">
                <i class="fas fa-user text-lg mb-1"></i>
                <span class="text-xs">我的</span>
            </button>
        </div>
    </div>
</body>
</html>